<template>
    <view class="container">
        <view class="avatar">
            <image src="/static/images/avatar.png"></image>
        </view>

        <view class="form">
            <u--form labelPosition="left" :model="business" :rules="rules" ref="uForm">

                <u-form-item label="手机" prop="mobile" borderBottom>
                    <u--input v-model="business.mobile" border="none" placeholder="请输入手机号"></u--input>
                </u-form-item>

                <u-form-item label="密码" prop="password" borderBottom>
                    <u--input type="password" v-model="business.password" border="none" placeholder="请输入密码"></u--input>
                </u-form-item>

                <view style="margin-top: 25px;">
                    <u-button type="warning" @click="submit">注册</u-button>
                </view>

                <!-- #ifdef H5 || APP-PLUS -->
                    <view class="btn" @click="ToLogin">
                        立即登录
                        <u-icon name="arrow-rightward"></u-icon>
                    </view>
                <!-- #endif -->

                <!-- #ifdef MP-WEIXIN -->
                    <view class="btn" @click="ToBind">
                        绑定账号
                        <u-icon name="arrow-rightward"></u-icon>
                    </view>

                    <view class="agreement">
                        <u-checkbox-group v-model="agreementStatus">
                            <u-checkbox name="agreement" label="我已阅读并同意" shape="circle" />
                            <navigator class="url" url="/pages/business/agreement">用户服务协议、隐私政策</navigator>
                        </u-checkbox-group>
                    </view>
                <!-- #endif -->
            </u--form>
        </view>

        <!-- 信息提示 -->
        <u-toast ref="uToast"></u-toast>
    </view>
</template>
<script>
export default {
    data() {
        return {
            business:{
                mobile:'',
                password:''
            },
            rules:{
                mobile: [
                {
                    // 自定义验证函数，见上说明
                    validator: (rule, value, callback) => {
                        // 上面有说，返回true表示校验通过，返回false表示不通过
                        // uni.$u.test.mobile()就是返回true或者false的
                        if (value) {
                            return uni.$u.test.mobile(value);
                        } else {
                            return false;
                        }
                    },
                    type: 'string',
                    required: true,
                    message: '手机号码不正确',
                    // 触发器可以同时用blur和change
                    trigger: ['change', 'blur'],
                }],
                'password': {
                    type: 'string',
                    required: true,
                    message: '请填写密码',
                    trigger: ['blur', 'change']
                },
            },
            agreementStatus:false,
            openid:''
        }
    },
    methods: {
        submit()
        {
            // #ifdef MP-WEIXIN
                if(this.agreementStatus === false)
                {
                    this.$refs.uToast.show({
                        type:'error',
                        message:'请同意用户服务协议'
                    });

                    return;
                }
            // #endif

            this.$refs.uForm.validate().then(async (res) => {
                // 封装数据
                let data = {
                    mobile:this.business.mobile.trim(),
                    password:this.business.password.trim(),
                    openid:this.openid
                }

                // 发起请求
                let result = await this.$u.api.business.register(data);

                if(result.code === 1)
                {
                    this.$refs.uToast.show({
                        type:'success',
                        message:result.msg,
                        complete:() => {

                            // #ifdef MP-WEIXIN
                                this.$u.route({
                                    type:'switchTab',
                                    url:'pages/business/index',
                                });
                            // #endif
                        }
                    });

                    return;
                }else{
                    this.$refs.uToast.show({
                        type:'error',
                        message:result.msg,
                    });

                    return;
                }


            }).catch((err) => {
            });
        },
        ToLogin()
        {
            this.$u.route('pages/business/login');
        },
        ToBind()
        {
            this.$u.route('pages/business/bind');
        }
    },
    onLoad(options)
    {
        this.openid = options.openid ?? '';
    },
    onReady() {
    	this.$refs.uForm.setRules(this.rules)
    },
}
</script>

<style>
page{
    background-color: #f8fafe;
}

.container .avatar {
    text-align: center;
    background-color: #fff;
}

.avatar image{
    width: 120px;
    height: 120px;
    margin: 50px 0;
    border-radius: 50%;
}

.form{
    margin: 0 50rpx;
    box-sizing: border-box;
}

.btn{
    margin-top: 25px;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* #ifdef H5 || APP-PLUS */
.u-icon{
    margin-left: 10px;
}
/* #endif */

/* #ifdef MP-WEIXIN */
.agreement{
    display: flex;
    justify-content: center;
    margin-top: 30px;
    font-size: 14px;
}
/* #endif */
</style>